<!-- 目标页面组件：PackageDetail.vue -->
<script setup>
import { useExampleStore } from '@/stores/exampleStore';
import { onMounted } from 'vue';
import router from "@/router/index.js";
import axios from "axios";

const exampleStore = useExampleStore();
const scopeData = exampleStore.scopeData; // 直接从 Pinia 取
const school = exampleStore.getSchool; // 直接从 Pinia 取

onMounted(() => {
  console.log('从 Pinia 拿到的套餐数据:', scopeData);
  console.log('从 Pinia 拿到的套餐数据:', school);

});

function fanhui(){
  router.back()    // 等同于 router.go(-1)
}
import { getToken } from '@/utils/auth'; // 导入获取令牌的工具函数
const token = getToken();
console.log(token)
function handlePurchase(){
  const requestData = {
    ...scopeData,  // 保留原有套餐数据
    school: Number(exampleStore.getSchool)  // 转换为数字类型
  };
  console.log('准备提交的数据',requestData)
  axios.post('http://localhost:8080/platform/your-api-url',requestData,{
    headers: {
      'Authorization': `Bearer ${token}` // 添加令牌到请求头
    }
  })
      .then(ret => {
        if (ret.data.code === 200) {
          // 接口逻辑处理成功，可做弹窗提示、跳转页面等操作
          console.log('选购成功', ret.data.msg);
          alert('选购成功,请尽快支付')
        } else {
          // 接口返回业务错误（如参数校验失败），提示错误信息
          console.error('业务错误', ret.data.msg);
          alert('业务错误')
        }
      })
}
</script>

<template>
  <div class="package-detail-container">
    <div class="header">
      <h1>套餐详情</h1>
    </div>
    <div class="content" v-if="scopeData">
      <div class="card">
        <div class="package-info">
          <div class="package-name">
            <h2>{{ scopeData.packageName }}</h2>
            <span class="package-status" :class="{'active': scopeData.status === 'ACTIVE', 'inactive': scopeData.status === 'INACTIVE'}">
              {{ scopeData.status === 'ACTIVE' ? '有效' : '已停用' }}
            </span>
          </div>
          <div class="package-price">
            <span class="price">{{ scopeData.annualFee || scopeData.feeAmount }}</span>
            <span class="unit">元/年</span>
          </div>
          <div class="package-desc">
            <p>{{ scopeData.description }}</p>
          </div>
        </div>

        <div class="package-features">
          <h3>套餐特性</h3>
          <ul>
            <li v-for="(feature, index) in scopeData.features || []" :key="index">
              <i class="el-icon-check"></i> {{ feature }}
            </li>
          </ul>
        </div>

        <div class="package-actions">
          <el-button type="primary" size="large" @click="handlePurchase(scopeData)">
            立即选购
          </el-button>
          <el-button type="primary" size="large" @click="fanhui">
            返回
          </el-button>
        </div>
      </div>
    </div>
    <div class="loading" v-else>
      <el-skeleton animated />
    </div>
  </div>
</template>

<style scoped>
.package-detail-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.package-info {
  margin-bottom: 30px;
}

.package-name {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.package-name h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.package-status {
  margin-left: 15px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.inactive {
  background-color: #f5f5f5;
  color: #bfbfbf;
}

.package-price {
  margin-bottom: 15px;
}

.price {
  font-size: 32px;
  font-weight: bold;
  color: #f5222d;
}

.unit {
  font-size: 16px;
  color: #8c8c8c;
  margin-left: 5px;
}

.package-desc {
  color: #595959;
  line-height: 1.6;
}

.package-features {
  margin-bottom: 30px;
}

.package-features h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.package-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.package-features li {
  margin-bottom: 10px;
  color: #595959;
}

.package-features li i {
  color: #52c41a;
  margin-right: 8px;
}

.package-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.loading {
  min-height: 400px;
}
</style>